$(function(){
$('#zzsc').html('<canvas id="canvas"></canvas>');
var WINDOW_WIDTH = 860;
		var WINDOW_HEIGHT = 250;
		var RADIUS = 7; //球半径 
		var NUMBER_GAP = 10; //数字之间的间隙
		var u=0.65; //碰撞能量损耗系数
		var context; //Canvas绘制上下文
		var balls = []; //存储彩色的小球
		const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; //彩色小球的颜色
		var currentNums = []; //屏幕显示的8个字符
		var digit =
                [
                    [
                        [0,0,1,1,1,0,0],
                        [0,1,1,0,1,1,0],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,0,1,1,0],
                        [0,0,1,1,1,0,0]
                    ],//0
                    [
                        [0,0,0,1,1,0,0],
                        [0,1,1,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [1,1,1,1,1,1,1]
                    ],//1
                    [
                        [0,1,1,1,1,1,0],
                        [1,1,0,0,0,1,1],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,1,1,0],
                        [0,0,0,1,1,0,0],
                        [0,0,1,1,0,0,0],
                        [0,1,1,0,0,0,0],
                        [1,1,0,0,0,0,0],
                        [1,1,0,0,0,1,1],
                        [1,1,1,1,1,1,1]
                    ],//2
                    [
                        [1,1,1,1,1,1,1],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,1,1,0],
                        [0,0,0,1,1,0,0],
                        [0,0,1,1,1,0,0],
                        [0,0,0,0,1,1,0],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,1,1,1,0]
                    ],//3
                    [
                        [0,0,0,0,1,1,0],
                        [0,0,0,1,1,1,0],
                        [0,0,1,1,1,1,0],
                        [0,1,1,0,1,1,0],
                        [1,1,0,0,1,1,0],
                        [1,1,1,1,1,1,1],
                        [0,0,0,0,1,1,0],
                        [0,0,0,0,1,1,0],
                        [0,0,0,0,1,1,0],
                        [0,0,0,1,1,1,1]
                    ],//4
                    [
                        [1,1,1,1,1,1,1],
                        [1,1,0,0,0,0,0],
                        [1,1,0,0,0,0,0],
                        [1,1,1,1,1,1,0],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,1,1,1,0]
                    ],//5
                    [
                        [0,0,0,0,1,1,0],
                        [0,0,1,1,0,0,0],
                        [0,1,1,0,0,0,0],
                        [1,1,0,0,0,0,0],
                        [1,1,0,1,1,1,0],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,1,1,1,0]
                    ],//6
                    [
                        [1,1,1,1,1,1,1],
                        [1,1,0,0,0,1,1],
                        [0,0,0,0,1,1,0],
                        [0,0,0,0,1,1,0],
                        [0,0,0,1,1,0,0],
                        [0,0,0,1,1,0,0],
                        [0,0,1,1,0,0,0],
                        [0,0,1,1,0,0,0],
                        [0,0,1,1,0,0,0],
                        [0,0,1,1,0,0,0]
                    ],//7
                    [
                        [0,1,1,1,1,1,0],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,1,1,1,0],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,1,1,1,0]
                    ],//8
                    [
                        [0,1,1,1,1,1,0],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [1,1,0,0,0,1,1],
                        [0,1,1,1,0,1,1],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,0,1,1],
                        [0,0,0,0,1,1,0],
                        [0,0,0,1,1,0,0],
                        [0,1,1,0,0,0,0]
                    ],//9
                    [
                        [0,0,0,0],
                        [0,0,0,0],
                        [0,1,1,0],
                        [0,1,1,0],
                        [0,0,0,0],
                        [0,0,0,0],
                        [0,1,1,0],
                        [0,1,1,0],
                        [0,0,0,0],
                        [0,0,0,0]
                    ]//:
                ];

		function reset(cxt){
			var nums = [];

			context.fillStyle="#005eac"
			nums.push({num: 0});
			nums.push({num: 0});
			nums.push({num: 10}); //冒号
			nums.push({num: 0});
			nums.push({num: 0});
			nums.push({num: 10}); //冒号
			nums.push({num: 0});
			nums.push({num: 0});

			for(var x = 0;x<nums.length;x++){
				nums[x].offsetX = offsetX;
				offsetX = drawSingleNumber(offsetX,offsetY, nums[x].num,cxt);
				//两个数字连一块，应该间隔一些距离
				if(x<nums.length-1){
					if((nums[x].num!=10) &&(nums[x+1].num!=10)){
						offsetX+=NUMBER_GAP;
					}
				}
			}

			//说明这是初始化
			if(currentNums.length ==0){
				currentNums = nums;
			}else{
				//进行比较
				for(var index = 0;index<currentNums.length;index++){
					if(currentNums[index].num!=nums[index].num){
						//不一样时，添加彩色小球
						addBalls(nums[index]);
						currentNums[index].num=nums[index].num;
					}
				}
			}
			renderBalls(cxt);
			updateBalls();
		}
		
		function drawDatetime(cxt){
			var nums = [];

			context.fillStyle="#005eac"
			var date = new Date();
			var offsetX = 70, offsetY = 30;
			var hours = t.getHour();
			var num1 = Math.floor(hours/10);
			var num2 = hours%10;
			nums.push({num: num1});
			nums.push({num: num2});
			nums.push({num: 10}); //冒号
			var minutes = t.getMin();
			var num1 = Math.floor(minutes/10);
			var num2 = minutes%10;
			nums.push({num: num1});
			nums.push({num: num2});
			nums.push({num: 10}); //冒号
			var seconds = t.getSecond();
			var num1 = Math.floor(seconds/10);
			var num2 = seconds%10;
			nums.push({num: num1});
			nums.push({num: num2});

			for(var x = 0;x<nums.length;x++){
				nums[x].offsetX = offsetX;
				offsetX = drawSingleNumber(offsetX,offsetY, nums[x].num,cxt);
				//两个数字连一块，应该间隔一些距离
				if(x<nums.length-1){
					if((nums[x].num!=10) &&(nums[x+1].num!=10)){
						offsetX+=NUMBER_GAP;
					}
				}
			}

			//说明这是初始化
			if(currentNums.length ==0){
				currentNums = nums;
			}else{
				//进行比较
				for(var index = 0;index<currentNums.length;index++){
					if(currentNums[index].num!=nums[index].num){
						//不一样时，添加彩色小球
						addBalls(nums[index]);
						currentNums[index].num=nums[index].num;
					}
				}
			}
			renderBalls(cxt);
			updateBalls();

			return date;
		}

		function addBalls (item) {
			var num = item.num;
			var numMatrix = digit[num];
			for(var y = 0;y<numMatrix.length;y++){
				for(var x = 0;x<numMatrix[y].length;x++){
					if(numMatrix[y][x]==1){
						var ball={
							offsetX:item.offsetX+RADIUS+RADIUS*2*x,
							offsetY:30+RADIUS+RADIUS*2*y,
							color:colors[Math.floor(Math.random()*colors.length)],
							g:1.5+Math.random(),
							vx:Math.pow(-1, Math.ceil(Math.random()*10))*4+Math.random(),
							vy:-5
						}
						balls.push(ball);
					}
				}
			}
		}

		function renderBalls(cxt){
			for(var index = 0;index<balls.length;index++){
				cxt.beginPath();
				cxt.fillStyle=balls[index].color;
				cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2*Math.PI);
				cxt.fill();
			}
		}

		function updateBalls () {
			var i =0;
			for(var index = 0;index<balls.length;index++){
				var ball = balls[index];
				ball.offsetX += ball.vx;
				ball.offsetY += ball.vy;
				ball.vy+=ball.g;
				if(ball.offsetY > (WINDOW_HEIGHT-RADIUS)){
					ball.offsetY= WINDOW_HEIGHT-RADIUS;
					ball.vy=-ball.vy*u;
				}
				if(ball.offsetX>RADIUS&&ball.offsetX<(WINDOW_WIDTH-RADIUS)){

					balls[i]=balls[index];
					i++;
				}
			}
			//去除出边界的球
			for(;i<balls.length;i++){
				balls.pop();
			}
		}
		function drawSingleNumber(offsetX, offsetY, num, cxt){
			var numMatrix = digit[num];
			for(var y = 0;y<numMatrix.length;y++){
				for(var x = 0;x<numMatrix[y].length;x++){
					if(numMatrix[y][x]==1){
						cxt.beginPath();
						cxt.arc(offsetX+RADIUS+RADIUS*2*x,offsetY+RADIUS+RADIUS*2*y,RADIUS,0,2*Math.PI);
						cxt.fill();
					}
				}
			}
			cxt.beginPath();
			offsetX += numMatrix[0].length*RADIUS*2;
			return offsetX;
		}

		var canvas = document.getElementById("canvas");
		canvas.width=WINDOW_WIDTH;
		canvas.height=WINDOW_HEIGHT;
		context = canvas.getContext("2d");

		//记录当前绘制的时刻
		var currentDate = new Date();

		// 定义-----------------------------
		function TimeCount()
		{
			
			this.isPause =  false;
			this.task = null; 
			this.isStart = false ;
		}

		TimeCount.prototype =
		{
		constructor: TimeCount, 
		start:function(callback){
			
			this.isStart = true ; 
			this.isPause = false ;
			if(this.task != null) clearTimeout(this.task);
			console.log(this.task);
			var _this = this ;
			this.task = setTimeout(function(){
				_this.totalSeconds-- ; 

				if(_this.totalSeconds == -1) 
					{
						_this.isPause = true ;
						_this.isStart = false ; 
					}
				
				if(!_this.isPause)
				{
					callback(_this.getHour() , _this.getMin(), _this.getSecond());
					_this.task = setTimeout(arguments.callee,1000);  
				}
			},1000);
		},
		pause:function(){
			console.log("pause");
			if(this.task != null)
				clearTimeout(this.task);
			this.isPause = true ;
		},
		timeContinue:function(callback)
		{
			console.log("continue")
			this.isPause = false ;
			this.start(callback);
		},
		getHour:function(){
			return parseInt(this.totalSeconds / 3600) ; 
		},
		getMin:function(){
			var _tmp = this.totalSeconds - this.getHour() * 3600 ; 
			return parseInt( _tmp / 60 );
		},
		getSecond:function(){
			if(this.totalSeconds <=0) {
				return 0;
			}
			return this.totalSeconds % 60 ;
		},
		toString:function(){
			return this.getHour() +":" + this.getMin() +":"+this.getSecond();
		},init:function(h , m ,s )
		{
			this.hour = h ;
			this.min = m ; 
			this.second = s ; 


				console.log("init : "+ this.hour +" , "+ this.min +" , " + this.second);
				this.totalSeconds =  parseInt(this.hour * 3600) + parseInt(this.min * 60) +  parseInt(this.second) ;
				this.initSecond = this.totalSeconds;

				console.log("total Second :" + this.totalSeconds);

		},getPer:function()
		{
			if(this.totalSeconds < 0) {
				return 0;
			}
			return parseInt(this.totalSeconds / this.initSecond*100);
		}

		}
		var t = new TimeCount();
		var hour = document.getElementById("js_hour");
		var min = document.getElementById("js_min");
		var second = document.getElementById("js_second");
		t.init(hour.value , min.value,second.value);
		// -----------------------
		
		var timer = setInterval(function(){
			//清空整个Canvas，重新绘制内容
			context.clearRect(0, 0, context.canvas.width, context.canvas.height);
			drawDatetime(context);
		}, 50);

		function init() {
 			var time = 0;
			var start = document.getElementById("js_start");
			var pause = document.getElementById("js_pause");

			time = t.totalSeconds;
			start.onclick = function()
			{
 				$("#pbar").find('.bar').animate({width:0}, 1);
				start.innerText = "开始";
		 		if ($("#js_second").val() == "") {
		 			layer.msg("秒必须输入！");
		 			return;
		 		} else {
		 			if (($("#js_min").val() == "" && $("#js_hour").val() == "")
		 					|| ($("#js_min").val() == 0 && $("#js_hour").val() == 0)) {
		 				if ($("#js_second").val() <= 0 || $("#js_second").val() > 59) {
			 				layer.msg("秒必须输入小于60并且大于0！");
			 				return;
		 				}
		 			}
		 			if (($("#js_min").val() != "" || $("#js_hour").val() != "") 
		 					|| ($("#js_min").val() != 0 || $("#js_hour").val() != 0)) {
			 			if ($("#js_second").val() < 0 || $("#js_second").val() > 59) {
				 			layer.msg("秒必须输入小于60并且大于等于0！");
				 			return;
			 			}
		 			}
		 			if ($("#js_min").val() != "" && ($("#js_min").val() < 0 || $("#js_min").val() > 59)) {
		 				if ($("#js_second").val() == 0 && $("#js_hour").val() == 0) {
				 			layer.msg("分输入必须小于60并且大于0！");
				 			return;
		 				} else {
				 			layer.msg("分输入必须小于60并且大于等于0！");
				 			return;
		 				}
		 			}
					if(t.isStart && t.isPause)
					{
		 				var bar = $("#pbar"),
		 				dataperc = bar.attr('data-perc'),
		 				barperc = Math.round(dataperc*5.56);
		 				bar.find('.bar').animate({width:barperc}, t.initSecond*1000);
						t.timeContinue(function(h , m ,s ){
			 			h = (h+"").length == 1 ? "0"+h:h ;
		 				m = (m+"").length == 1 ? "0"+m:m ;
			 			s = (s+"").length == 1 ? "0"+s:s ;
		 			});
		 			return;
					}

					t.init(hour.value , min.value,second.value);
	 			t.start(function(h , m ,s ){
	 				var bar = $("#pbar"),
	 				dataperc = bar.attr('data-perc'),
	 				barperc = Math.round(dataperc*5.56);
	 				bar.find('.bar').animate({width:barperc}, t.initSecond*1000);
	 				h = (h+"").length == 1 ? "0"+h:h ;
	 				m = (m+"").length == 1 ? "0"+m:m ;
		 			s = (s+"").length == 1 ? "0"+s:s ;
	 			}); 
		 		}
			}
		}
		window.onload = init ;
		
		// bar--------------------------
});